import { FC, useEffect } from "react";
import { observer, inject } from "mobx-react";
import { Result, Button } from "antd";
import { useNavigate } from "react-router-dom";
import { ITStore } from "../../store";
type TProp = {
  store: ITStore;
};
const NotFound: FC<TProp | any> = ({ store }: TProp): JSX.Element => {
  const {
    languageStore: { lang, getAllLanguage, changeLangCur },
  } = store;

  const navigate = useNavigate();

  useEffect(() => {
    const currentLang = localStorage.getItem("lang") || "en";
    changeLangCur(currentLang);
    getAllLanguage(false);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <Result
      status={404}
      title="404"
      subTitle={lang["langpagenotfound"]}
      extra={
        <Button
          type="primary"
          onClick={() => {
            navigate("/designer");
          }}
        >
          {lang["langbackhome"]}
        </Button>
      }
    />
  );
};

export default inject("store")(observer(NotFound));
